<template>
  <div class="simulation-analysis">
    <div class="card">
      <div class="title">模拟分析</div>
      <table class="analysis-table">
        <tbody>
          <!-- 第一行：河流选取 + 分析起始点 -->
          <tr>
            <td class="label">河流选取：</td>
            <td>
              <el-select v-model="form.river" placeholder="请选择河流">
                <el-option label="伊河" value="伊河"></el-option>
                <el-option label="其他河流" value="other"></el-option>
              </el-select>
            </td>
            <td class="label">分析起始点：</td>
            <td>
              <el-button icon="el-icon-globe" type="primary" plain></el-button>
            </td>
          </tr>
          <!-- 第二行：经度 + 纬度 -->
          <tr>
            <td class="label">经度：</td>
            <td>
              <el-input v-model="form.longitude" disabled></el-input>
            </td>
            <td class="label">纬度：</td>
            <td>
              <el-input v-model="form.latitude" disabled></el-input>
            </td>
          </tr>
          <!-- 第三行：流速 + 流量 -->
          <tr>
            <td class="label">流速：</td>
            <td>
              <el-input
                v-model="form.flowVelocity"
                disabled
                suffix="m/s"
              ></el-input>
            </td>
            <td class="label">流量：</td>
            <td>
              <el-input
                v-model="form.flowRate"
                disabled
                suffix="m³/s"
              ></el-input>
            </td>
          </tr>
          <!-- 第四行：达标浓度 -->
          <tr>
            <td class="label">达标浓度：</td>
            <td colspan="3">
              <el-input
                v-model="form.standardConcentration"
                suffix="mg/L"
              ></el-input>
            </td>
          </tr>
          <!-- 第五行：模拟时间长度 + 模拟时间间隔 -->
          <tr>
            <td class="label">模拟时间长度：</td>
            <td>
              <el-input v-model="form.simulationTime" suffix="小时"></el-input>
            </td>
            <td class="label">模拟时间间隔：</td>
            <td>
              <el-select v-model="form.timeInterval" placeholder="请选择">
                <el-option label="5分钟" value="5"></el-option>
                <el-option label="10分钟" value="10"></el-option>
              </el-select>
            </td>
          </tr>
          <!-- 第六行：污染物泄露总量 -->
          <tr>
            <td class="label">污染物泄露总量：</td>
            <td colspan="3">
              <el-input v-model="form.pollutantAmount" suffix="kg"></el-input>
            </td>
          </tr>
          <!-- 第七行：纵向离散系数 -->
          <tr>
            <td class="label">纵向离散系数：</td>
            <td colspan="3">
              <el-input
                v-model="form.longitudinalDispersion"
                suffix="m²/s"
              ></el-input>
            </td>
          </tr>
          <!-- 第八行：滑块 -->
          <tr>
            <td colspan="4">
              <el-slider
                v-model="sliderValue"
                :min="0"
                :max="60"
                show-input
              ></el-slider>
            </td>
          </tr>
          <!-- 第九行：操作按钮 -->
          <tr>
            <td colspan="4" class="button-group">
              <el-button type="primary" icon="el-icon-video-play"></el-button>
              <el-button type="primary" icon="el-icon-pause"></el-button>
              <el-button
                type="primary"
                icon="el-icon-refresh-right"
              ></el-button>
              <el-button type="primary" icon="el-icon-delete"></el-button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  name: "SimulationAnalysisTable",
  data() {
    return {
      form: {
        river: "伊河",
        longitude: "111.808801",
        latitude: "33.997491",
        flowVelocity: "1.282",
        flowRate: "100",
        standardConcentration: "0.05",
        simulationTime: "1",
        timeInterval: "5",
        pollutantAmount: "2",
        longitudinalDispersion: "50",
      },
      sliderValue: 0,
    };
  },
};
</script>

<style scoped>
.simulation-analysis {
  background-color: #fff;
  padding: 20px;
}

.card {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  padding: 10px;
}

.title {
  font-size: 20px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 24px;
  border-left: 4px solid #409eff;
  padding-left: 12px;
}

.analysis-table {
  width: 100%;
  border-collapse: collapse;
}

.analysis-table tr td {
  border: 1px solid #e4e7ed; /* 恢复竖线和横线 */
  padding: 16px 10px;
  vertical-align: middle;
}

.analysis-table .label {
  width: 80px;
  text-align: right;
  color: #606266;
  font-size: 14px;
}

.analysis-table .el-input,
.analysis-table .el-select .el-input__inner {
  background-color: #fff;
  border: 1px solid #dcdcdc;
  color: #303133;
  width: 100%;
  border-radius: 4px;
}

.analysis-table .el-input.is-disabled .el-input__inner {
  background-color: #f5f7fa;
  color: #909399;
  cursor: not-allowed;
}

.analysis-table .el-input__inner:focus,
.analysis-table .el-select .el-input__inner:focus {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

.analysis-table .el-select-dropdown {
  background-color: #fff;
  border: 1px solid #dcdcdc;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.analysis-table .el-select-dropdown__item {
  color: #606266;
}

.analysis-table .el-select-dropdown__item:hover {
  background-color: #f5f7fa;
  color: #409eff;
}

.analysis-table .el-slider__runway {
  background-color: #e4e7ed;
}

.analysis-table .el-slider__bar {
  background-color: #409eff;
}

.analysis-table .el-slider__button {
  border: 2px solid #fff;
  background-color: #409eff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.button-group {
  text-align: left;
}

.button-group .el-button {
  background-color: #fff;
  border: 1px solid #dcdcdc;
  color: #606266;
  margin-right: 12px;
  border-radius: 4px;
}

.button-group .el-button:hover {
  border-color: #409eff;
  color: #409eff;
}

.button-group .el-button--primary {
  background-color: #409eff;
  border-color: #409eff;
  color: #fff;
}

.button-group .el-button--primary:hover {
  background-color: #66b1ff;
  border-color: #66b1ff;
}
</style>
